<template>
  <div class="infinite-container">
    <search-bar @search="searchHandle"></search-bar>
    <div class="department" v-if="depts.length === 0">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul class="menu-list">
          <li v-for="(item, index) in departments" :key="item.departmentCode + index" @click="menuClick(item, index)" :class="{'active':item.activeClass}">
              <span>{{item.departmentName}}</span>
            </li>
        </ul>
      </div>
      <div class="depart-wrapper bgwhite" ref="departWrapper">
        <ul class="depart-list">
            <li v-for="item in children" :key="item.departmentCode">
                <a href="javascript:;" @click="itemClick(item)">
                {{item.departmentName}}
                </a>
            </li>
        </ul>
        <div class="no-data" v-show="nodata">暂无数据</div>
      </div>
    </div>

  </div>
</template>
<script>
import {commonAjax} from '@/api/api'
import BScroll from 'better-scroll'
import SearchBar from '@/components/SearchBar'

export default {
  components: {SearchBar},
  data () {
    return {
      departments: [],
      children: [],
      departScroll: null,
      depts: [],
      person: JSON.parse(sessionStorage.person || '{}'),
      nodata: false
    }
  },
  methods: {
    _initScroll () {
      this.menuScroll = new BScroll(this.$refs.menuWrapper, {click: true})
      this.departScroll = new BScroll(this.$refs.departWrapper, {click: true})
    },
    searchHandle (val) {
      if (!val) {
        return
      }
      this.$router.push(`/about/search?s=${val}&needAuth=1`)
    },
    queryDeptAndDoctor (query) {
      commonAjax('appointment/queryDeptAndDoctor', {query}, true).then(res => {
        if (res.data.code == 200) {
          this.depts = res.data.data
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.message
          })
        }
      })
    },
    menuClick (item, index) {
      this.children = item.child
      this.nodata = item.child.length === 0
      this.departments.forEach((v, i) => { v.activeClass = index === i })
      // refresh scroller if element changes
      this.departScroll.scrollToElement(this.$refs.departWrapper, 300)
      this.$nextTick(() => { this.departScroll.refresh() })
    },
    itemClick (item) {
      sessionStorage.dept = JSON.stringify(item)
      this.$router.push({
        path: '/appointment/select-doctor'
      })
    },
    getDepts () {
      // outpatientTpye 1-普通 2-云门诊
      let outpatientTpye = 1
      commonAjax('appointment/listDepartment', {outpatientTpye}, true).then(res => {
          if (res.data.code == 200 && res.data.data.length > 0) {
          let d = res.data.data
          d.forEach((v, i) => {
            v.activeClass = i === 0
          })
          this.departments = d
          sessionStorage.cachedDepts = JSON.stringify(d)
          this.children = d[0].child
          this.$nextTick(() => { this._initScroll() })
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          this.departments = []
        }
      }).catch(res => {
      })
    },
    goToDoctors (dept) {
      // 医生
      if (dept.doctorName) {
        sessionStorage.dept = JSON.stringify({
          departmentCode: dept.departmentCode,
          departmentName: dept.departmentName
        })
        sessionStorage.doctor = JSON.stringify(dept)
        this.$router.push({
          path: `/appointment/doctor-info`
        })
      } else {
        // 科室
        sessionStorage.dept = JSON.stringify(dept)
        this.$router.push({
          path: `/appointment/select-doctor`
        })
      }
    }
  },
  mounted () {
    // default from cache
    if (!sessionStorage.cachedDepts) {
      this.getDepts()
      return
    }
    this.$log('get depts from cache!')
    let cachedDepts = JSON.parse(sessionStorage.cachedDepts)
    this.departments = cachedDepts
    this.children = cachedDepts[0].child
    this.$nextTick(() => { this._initScroll() })
  },
  beforeDestroy () {
    this.$store.commit('UPDATE_HEADERSHOW')
  }
}
</script>

<style lang="less" scoped>
@import '../../common/css/vars.less';
.department {
  display: -webkit-box;
  display: flex;
  position: absolute;
  top: 56px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  .menu-wrapper {
    -webkit-box-flex: 0;
    width: 40%;
    background: #F5F5F5;
    color: @color-primary;
  }
  .depart-wrapper {
    -webkit-box-flex: 1;
    flex: 1;
  }
  .menu-list, .depart-list {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      border-bottom: 1px solid #EDE9E3;
      span {
        margin: 10px 0;
        padding: 6px 10px;
        display: block;
        font-size: 1.1em;
        color: #333;
      }
      &.active {
        background: #fff;
        span {
          border-left: 4px solid @color-primary;
        }
      }
      a{
        color: #333;
        display: block;
        padding: 1.2em;
      }
    }
  }
  .depart-list>li {
    border: none;
  }
}
.sdfontred{
  color:red;
}
</style>
